<template>
  <div class="time-watch">
    <Header title="实时监控"/>
    <div class="content">
      <a-tree-select
        show-search
        style="width: 100%"
        v-model="value"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择分中心"
        allow-clear
        tree-default-expand-all
        @select="handleChange"
      >
        <a-tree-select-node
          :key="item.key"
          :value="item.branchname"
          :title="item.branchname"
          v-for="item in treeData">
          <a-tree-select-node
            :key="item1.key"
            :value="item1.serviceAreaname"
            :title="[item1.serviceAreaname,item1.tollboothname]"
            v-for="item1 in  item.children">
          </a-tree-select-node>
        </a-tree-select-node>
      </a-tree-select>
      <div class="vedio">
        <img src="../../../assets/icons/shipin3@3x.png" alt="">
        <span>路段1</span>
        <div class="video-wrapper">
          <video-player class="vjs-custom-skin" :options="playerOptions" x5-playsinline="true"
                        webkit-playsinline="true"/>
        </div>
      </div>
      <div class="vedio" style="margin-top: 20px">
        <img src="../../../assets/icons/shipin3@3x.png" alt="">
        <span>路段2</span>
        <div class="video-wrapper">
          <video-player class="vjs-custom-skin" :options="playerOptions1" x5-playsinline="true"
                        webkit-playsinline="true"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from './../../../components/Header/Header'
import { getAllList, getVideoUrl, getVideoUrlL } from '../../../api'
export default {
  name: 'TimeWatch',
  data () {
    return {
      // 分中心列表数组
      centerList: [],
      // 服务区列表数组
      serviceAreaList: [],
      value: undefined,
      treeData: [],
      // 视频播放地址
      src: '',
      // 收费站信息函数
      tollBooth: {},
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        atuoplay: true,
        controls: true,
        proload: 'auto',
        muted: false,
        loop: true,
        language: 'zh-CN',
        aspectRadio: '16:9',
        fluid: true,
        sources: [
          {
            type: 'application/x-mpegURL',
            src: ''
          }
        ],
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      playerOptions1: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        atuoplay: true,
        controls: true,
        proload: 'auto',
        muted: false,
        loop: true,
        language: 'zh-CN',
        aspectRadio: '16:9',
        fluid: true,
        sources: [
          {
            type: 'application/x-mpegURL',
            src: ''
          }
        ],
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  created () {
  // 获取下拉收费站和服务区信息
    this.getAllListData()
    this.getVideoUrlData()
  },
  components: {
    Header
  },
  methods: {
    // 获取分中心下服务区和收费站列表
    async getAllListData () {
      const result = await getAllList()
      // console.log(result)
      this.treeData = result.data
    },
    handleChange (val, index) {
      // console.log(val)
      // console.log(index)
    },
    // 获取视频地址
    async getVideoUrlData () {
      const result = await getVideoUrl()
      this.playerOptions.sources[0].src = result.data
      // 使用JS实现视频的动态播放
      this.playerOptions.autoplay = true
      // 低码流视频
      const result1 = await getVideoUrlL()
      this.playerOptions1.sources[0].src = result1.data
      // 使用JS实现视频的动态播放
      this.playerOptions1.autoplay = true
    }
  }
}
</script>

<style scoped lang="less">
  .vjs-big-play-button {
    left: 50% !important;
    top: 50% !important;
    margin-top: -1em;
    margin-left: -1.5em;
  }
  .time-watch {
    background-color: #fff;
    height: 100%;
    width: 100%;
    letter-spacing: 1px;

    .content {
      width: 344px;
      margin: 15px auto 0;
      .vedio{
        margin-top: 20px;
        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
          margin-bottom: 12px;
        }

        span {
          font-size: 12px;
          color: #343434;
        }
      }

      .title {
        background-color: #efefef;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        border-radius: 8px;
        padding-left: 13px;
        color: #4c4c4c;
        width: 100%;
        option {
          width: 344px;
        }
      }

      .item {
        position: relative;
        display: block;
        height: 58px;
        line-height: 58px;
        text-align: center;
        border-bottom: 1px solid #f2f1f1;
        color: #4c4c4c;
        font-size: 15px;
        margin-left: -8px;

        &::before {
          position: absolute;
          top: 50%;
          left: 110px;
          transform: translateY(-50%);
          content: "";
          display: block;
          width: 22px;
          height: 22px;
          background: url("./../../../assets/icons/实时监控.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
</style>
